<script setup lang="ts">
defineComponent({ name: 'ArticleDetail' })
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { defineComponent, onBeforeUnmount, onMounted, reactive, ref, shallowRef, watch, } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Boot } from '@wangeditor/editor'
import type { IDomEditor, ISelectMenu } from '@wangeditor/editor'
import { Transforms } from 'slate'
import service from '../config/index';
import TitleBlack from './customMenu/index'

interface MenuOption {
    value: string
    text: string
    styleForRenderMenuList: Record<string, string>
}

// 自定义下拉面板菜单类
class CustomDropPanelMenu implements ISelectMenu {
    public readonly title: string = '插入组件'
    public readonly tag: string = 'button'
    public readonly showDropPanel: boolean = true

    // 下拉框的选项
    getOptions(editor: IDomEditor): MenuOption[] {
        return []
    }

    // 菜单是否需要激活
    isActive(editor: IDomEditor): boolean {
        return false
    }

    // 获取菜单执行时的 value
    getValue(editor: IDomEditor): string | boolean {
        return ''
    }

    // 菜单是否需要禁用
    isDisabled(editor: IDomEditor): boolean {
        return false
    }

    // 点击菜单时触发的函数
    exec(editor: IDomEditor, value: string | boolean): void {
        // 下拉面板菜单不需要在这里处理，由 getPanelContentElem 处理
    }

    // 获取下拉面板内容元素
    getPanelContentElem(editor: IDomEditor): HTMLElement {
        const panel = document.createElement('div')
        panel.style.cssText = `
            width: 100px;
        `

        const options = [
            { value: '超链接组件', text: '超链接组件' }
        ]

        options.forEach(option => {
            const optionItem = document.createElement('div')
            optionItem.style.cssText = `
                padding: 8px 0;
                cursor: pointer;
                font-size: 14px;
                color: #333;
            `
            optionItem.textContent = option.text

            optionItem.addEventListener('mouseenter', () => {
                optionItem.style.backgroundColor = '#f5f5f5'
            })

            optionItem.addEventListener('mouseleave', () => {
                optionItem.style.backgroundColor = 'white'
            })

            optionItem.addEventListener('click', () => {
                this.showModal(editor, option.value)
            })

            panel.appendChild(optionItem)
        })

        return panel
    }

    // 显示模态框
    private showModal(editor: IDomEditor, type: string): void {
        // 创建模态框内容（直接插入到编辑器中，无遮罩层）
        const modalContent = document.createElement('div')
        modalContent.className = 'w-e-modal'

        // 获取当前光标位置
        const selection = editor.selection
        let cursorPosition = { top: 0, left: 0 }

        if (selection) {
            try {
                // 尝试获取光标在编辑器中的位置
                const editorDom = editor.getEditableContainer()
                if (editorDom) {
                    // 使用DOM Range API获取光标位置
                    const range = window.getSelection()?.getRangeAt(0)
                    if (range) {
                        const rect = range.getBoundingClientRect()
                        const editorRect = editorDom.getBoundingClientRect()
                        cursorPosition = {
                            top: rect.top - editorRect.top + editorDom.scrollTop,
                            left: rect.left - editorRect.left
                        }
                    }
                }
            } catch (e) {
                // 如果获取光标位置失败，使用默认位置
                console.warn('无法获取光标位置，使用默认位置', e)
            }
        }

        // 计算弹窗位置，确保不超出编辑器边界
        const editorDom = editor.getEditableContainer()
        const editorRect = editorDom?.getBoundingClientRect()
        const modalWidth = 300
        const modalHeight = 400 // 预估高度

        let finalTop = cursorPosition.top + 20
        let finalLeft = cursorPosition.left

        if (editorRect) {
            // 确保弹窗不超出右边界
            if (finalLeft + modalWidth > editorRect.width) {
                finalLeft = editorRect.width - modalWidth - 10
            }
            // // 确保弹窗不超出下边界
            // if (finalTop + modalHeight > editorRect.height) {
            //     finalTop = Math.max(10, cursorPosition.top - modalHeight - 10)
            // }
            // 确保弹窗不超出左边界
            if (finalLeft < 0) {
                finalLeft = 10
            }
            // 确保弹窗不超出上边界
            if (finalTop < 0) {
                finalTop = 10
            }
        }

        modalContent.style.cssText = `
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            padding: 16px;
            width: ${modalWidth}px;
            position: absolute;
            top: ${finalTop}px;
            left: ${finalLeft}px;
            z-index: 1000;
            background: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        `

        // 创建输入框和按钮（完全按照extend-menu-modal.html的样式）
        const titleInputId = `title-input-${Math.random().toString(16).slice(-8)}`
        const descInputId = `desc-input-${Math.random().toString(16).slice(-8)}`
        const imageInputId = `image-input-${Math.random().toString(16).slice(-8)}`
        const linkInputId = `link-input-${Math.random().toString(16).slice(-8)}`
        const serviceNameInputId = `service-name-input-${Math.random().toString(16).slice(-8)}`
        const jobNatureInputId = `job-nature-input-${Math.random().toString(16).slice(-8)}`
        const salaryRangeInputId = `salary-range-input-${Math.random().toString(16).slice(-8)}`
        const buttonId = `button-${Math.random().toString(16).slice(-8)}`

        modalContent.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                <span style="font-weight: 500; color: #333;">超链接卡片</span>
                <button id="close-${titleInputId}" style="
                    background: none;
                    border: none;
                    font-size: 16px;
                    cursor: pointer;
                    color: #999;
                    padding: 0;
                    width: 20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                ">×</button>
            </div>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">标题</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="text" id="${titleInputId}" value="" placeholder="Enter title..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">描述</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <textarea id="${descInputId}" placeholder="Enter description..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                    min-height: 80px;
                    resize: vertical;
                "></textarea>
            </label>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">图片地址</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="url" id="${imageInputId}" value="" placeholder="Enter image URL..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">服务名称</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="text" id="${serviceNameInputId}" value="" placeholder="Enter service name..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">工作性质</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="text" id="${jobNatureInputId}" value="" placeholder="Enter job nature..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
            <div style="font-weight: 500; color: #333; margin-bottom: 8px;">薪资范围</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="text" id="${salaryRangeInputId}" value="" placeholder="Enter salary range..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
             <div style="font-weight: 500; color: #333; margin-bottom: 8px;">search information link</div>
            <label class="babel-container" style="display: block; margin-bottom: 12px;">
                <input type="url" id="${linkInputId}" value="" placeholder="Enter search information link..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                ">
            </label>
            <div class="button-container" style="text-align: right;">
                <button id="${buttonId}" style="
                    padding: 8px 16px;
                    background: #1677ff;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                ">insert</button>
            </div>
        `

        // 插入到编辑器中
        if (editorDom) {
            // 确保编辑器容器有相对定位
            const editorStyle = window.getComputedStyle(editorDom)
            if (editorStyle.position === 'static') {
                (editorDom as HTMLElement).style.position = 'relative'
            }
            editorDom.appendChild(modalContent)
        }

        // 绑定事件
        const titleInput = modalContent.querySelector(`#${titleInputId}`) as HTMLInputElement
        const descInput = modalContent.querySelector(`#${descInputId}`) as HTMLTextAreaElement
        const imageInput = modalContent.querySelector(`#${imageInputId}`) as HTMLInputElement
        const linkInput = modalContent.querySelector(`#${linkInputId}`) as HTMLInputElement
        const serviceNameInput = modalContent.querySelector(`#${serviceNameInputId}`) as HTMLInputElement
        const jobNatureInput = modalContent.querySelector(`#${jobNatureInputId}`) as HTMLInputElement
        const salaryRangeInput = modalContent.querySelector(`#${salaryRangeInputId}`) as HTMLInputElement
        const button = modalContent.querySelector(`#${buttonId}`) as HTMLButtonElement
        const closeButton = modalContent.querySelector(`#close-${titleInputId}`) as HTMLButtonElement

        button.addEventListener('click', (e) => {
            e.preventDefault()
            const title = titleInput.value
            const description = descInput.value
            const imageUrl = imageInput.value
            const linkUrl = linkInput.value
            const serviceName = serviceNameInput.value
            const jobNature = jobNatureInput.value
            const salaryRange = salaryRangeInput.value
            if (!title || !description || !imageUrl || !linkUrl || !serviceName || !jobNature || !salaryRange) {
                ElMessage.error('请完善卡片内容');
                return
            }

            // 恢复选区
            editor.restoreSelection()

            // 根据选择的类型插入不同的自定义元素
            if (type === '超链接组件') {
                // 插入 title-black 自定义元素
                const titleBlackNode = {
                    type: 'title-black',
                    title: title || '', // 确保不是 null 或 undefined
                    description: description || '',
                    imageUrl: imageUrl || '',
                    linkUrl: linkUrl || '',
                    serviceName: serviceName || '',
                    jobNature: jobNature || '',
                    salaryRange: salaryRange || '',
                    children: [{ text: '' }]
                }
                // 使用 Slate 的 Transforms.insertNodes 插入节点
                Transforms.insertNodes(editor, titleBlackNode)
                // 在自定义元素后面插入一个空段落，并将光标移动到那里
                const emptyParagraph = {
                    type: 'paragraph',
                    children: [{ text: '' }]
                }
                Transforms.insertNodes(editor, emptyParagraph)
            }

            // 移除模态框
            if (modalContent.parentNode) {
                modalContent.parentNode.removeChild(modalContent)
            }
            // 清理事件监听器
            document.removeEventListener('mousedown', handleClickOutside)
        })

        // 关闭按钮事件
        closeButton.addEventListener('click', () => {
            if (modalContent.parentNode) {
                modalContent.parentNode.removeChild(modalContent)
            }
            // 清理事件监听器
            document.removeEventListener('mousedown', handleClickOutside)
        })

        // 点击外部关闭弹窗
        const handleClickOutside = (event: Event) => {
            if (!modalContent.contains(event.target as Node)) {
                if (modalContent.parentNode) {
                    modalContent.parentNode.removeChild(modalContent)
                }
                document.removeEventListener('mousedown', handleClickOutside)
            }
        }

        // 延迟添加点击外部事件，避免立即触发
        setTimeout(() => {
            document.addEventListener('mousedown', handleClickOutside)
        }, 100)

        // 聚焦到输入框
        setTimeout(() => {
            titleInput.focus()
        }, 100)
    }
}

const emit = defineEmits(['close', 'reSearch']);
const props = defineProps<{
    type: String,
    id: String,
    showDrawer: Boolean
}>();
const editorRef = shallowRef()
const editorKey = ref(0) // 强制重挂载用

// 注册自定义菜单
const menuConf = {
    key: 'customDropPanelTest', // 菜单 key ，唯一标识
    factory() {
        return new CustomDropPanelMenu()
    }
}

const toolbarConfig = {
    excludeKeys: ['fullScreen', 'codeBlock', 'group-video'],
    insertKeys: {
        index: 0, // 插入的位置
        keys: ['customDropPanelTest'] // 要插入的菜单 key
    }
}
const editorConfig = ref({
    readOnly: false,
    placeholder: '请输入正文内容...',
    MENU_CONF: {
        uploadImage: {
            customUpload(file, insertFn) {
                const formData = new FormData();
                formData.append('uploadFile', file);
                service.post('/image/upload', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                    .then(res => {
                        const imageUrl = res.data.url;
                        const altText = '';
                        const hrefLink = '';
                        insertFn(imageUrl, altText, hrefLink);
                    })
                    .catch(error => {
                        ElMessage.error(error?.response?.statusText || error?.message);
                    });
            }
        }
    }
})
const data = ref<{ title: string, metaTitle: string, metaDescription: string, terms: string, text: string, firstP: string }>({
    title: '',
    metaTitle: '',
    metaDescription: '',
    terms: '',
    text: '',
    firstP: ''
})
const options = ref([])
const languageOptions = ref([])
const siteOptions = ref([])
const allSiteOptions = ref([])
const accountNameOptions = ref([])
const ruleFormRef = ref<FormInstance>()

interface RuleForm {
    outShow: string
    articleCategoryId: string
    langId: number,
    accountId: number
    siteId: number

}

const ruleForm = ref<RuleForm>({
    outShow: '1',
    articleCategoryId: '',
    accountId: null,
    langId: null,
    siteId: null
})

const rules = reactive<FormRules<RuleForm>>({
    outShow: [
        { required: true, message: '', trigger: 'blur' },
    ],
    articleCategoryId: [{ required: true, message: '请选择文章分类', trigger: 'blur' }],
    langId: [{ required: true, message: '请选择语言', trigger: 'blur' }],
    accountId: [{ required: true, message: '请选择账户名称', trigger: 'blur' }],
    siteId: [{ required: true, message: '请选择所属网站', trigger: 'blur' }]
})


const getAccount = () => {
    service.get('/account/getAll')
        .then(response => {
            accountNameOptions.value = response?.data
            accountNameOptions.value.push({ id: -1, name: '其他' })
        })
        .catch(error => {
            ElMessage.error(error)
        });
}


const buildTree = (nodes, parentId = null) => {
    return nodes
        .filter(node => node.parentId === parentId)
        .map(node => {
            const children = buildTree(nodes, node.value);
            return {
                ...node,
                ...(children.length > 0 ? { children } : {})
            };
        });
}

const getArticleCategory = () => {
    service.get('/article/allCategory')
        .then(response => {
            const treeData = response.data?.map(item => ({
                label: item.name,
                value: item.id,
                parentId: item.parentId,
                alias: item.alias
            }));
            options.value = buildTree(treeData);
        })
        .catch(error => {
            ElMessage.error(error?.message)
        });
}

const getlangCategory = () => {
    service.get('/lang/getAll')
        .then(response => {
            languageOptions.value = response?.data
        })
        .catch(error => {
            ElMessage.error(error?.message)
        });
}

const handleSelectAccount = () => {
    const selectedAccountId = ruleForm.value.accountId
    if (selectedAccountId === null || selectedAccountId === undefined) {
        siteOptions.value = [...allSiteOptions.value]
        return
    }
    const filtered = allSiteOptions.value?.filter((item: any) => item.accountId == selectedAccountId) || []
    siteOptions.value = filtered
    const exists = filtered?.some((s: any) => s.id == ruleForm.value.siteId)
    if (!exists) {
        ruleForm.value.siteId = null
    }
}



const getSite = () => {
    service.get('/site/getAll')
        .then(response => {
            allSiteOptions.value = response?.data || []
            siteOptions.value = [...allSiteOptions.value]
        })
        .catch(error => {
            ElMessage.error(error?.message)
        });
}

const handleClose = () => {
    emit('close');
    if (editorRef.value) {
        try { editorRef.value.destroy?.() } catch (e) { /* ignore */ }
        editorRef.value = null
    }
    editorKey.value++
    ruleForm.value = {
        outShow: '1',
        articleCategoryId: '',
        langId: null,
        siteId: null,
        accountId: null
    }
    data.value = {
        title: '',
        metaTitle: '',
        metaDescription: '',
        terms: '',
        text: '',
        firstP: ''
    }
}

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const parser = new DOMParser();
            const doc = parser.parseFromString(data.value.text, 'text/html');
            // 2. 获取第一个 img 标签的 src
            const firstImg = doc.querySelector('img');
            const firstImgSrc = firstImg?.src; // 使用可选链防止报错
            console.log(firstImgSrc);
            service.post(props.type === 'add' ? '/article/add' : '/article/update', { ...ruleForm.value, ...data.value, articleCategoryId: typeof ruleForm.value.articleCategoryId === 'number' ? ruleForm.value.articleCategoryId : ruleForm.value.articleCategoryId?.[ruleForm.value.articleCategoryId?.length - 1], id: props.type === 'add' ? undefined : props.id, image: firstImgSrc || undefined })
                .then(response => {
                    ElMessage.success('提交成功！')
                    handleClose()
                    emit('reSearch')
                })
                .catch(error => {
                    ElMessage.error(error || '提交失败！')
                });
        } else {

        }
    })
}

watch(() => props.showDrawer, () => {
    if (!props.showDrawer) return
    // 每次打开或切换文章，销毁旧实例并强制重挂载
    if (editorRef.value) {
        try { editorRef.value.destroy?.() } catch (e) { /* ignore */ }
        editorRef.value = null
    }
    editorKey.value++
    data.value.text = ''
    if (props.type !== 'add') {
        service.post('/article/detail', { id: props.id })
            .then(response => {
                if (response?.data) {
                    ruleForm.value = {
                        articleCategoryId: response.data?.articleCategoryId,
                        outShow: response.data?.outShow,
                        langId: response.data?.langId,
                        siteId: response.data?.siteId,
                        accountId: response.data?.accountId
                    }
                    data.value = {
                        title: response.data?.title,
                        metaTitle: response.data?.metaTitle,
                        metaDescription: response.data?.metaDescription,
                        terms: response.data?.terms,
                        text: (response.data?.text || ''),
                        firstP: response.data?.firstP
                    }
                }
            })
            .catch(error => {
                ElMessage.error(error?.message)
            })
    }
}, { immediate: true })

onMounted(() => {
    // 注册菜单到 wangEditor (避免重复注册)
    try {
        Boot.registerMenu(menuConf)
    } catch (e) {
        // 如果菜单已注册则忽略错误
        console.log('菜单已注册，跳过重复注册')
    }
    try {
        Boot.registerModule(TitleBlack)
    } catch (e) {
        // 如果模块已注册则忽略错误
        console.log('模块已注册，跳过重复注册')
    }
    getArticleCategory()
    getlangCategory()
    getSite()
    getAccount()
})


onBeforeUnmount(() => {
    if (editorRef.value) {
        try { editorRef.value.destroy?.() } catch (e) { /* ignore */ }
        editorRef.value = null
    }
})

</script>

<template>
    <div class="article-detail">
        <div
            style="display: flex; padding:16px 24px;border-bottom: 1px solid rgba(5, 5, 5, 0.06);background-color: #fff;justify-content: space-between;">
            <span style="display: flex; align-items: center;font-size: 20px;font-weight: 700;">添加文章</span>
            <div>
                <el-form ref="ruleFormRef" style="display: flex;flex: 1;align-items: center;gap: 15px;"
                    :model="ruleForm" :rules="rules" label-width="auto">
                    <el-form-item label="是否外显" prop="outShow">
                        <el-radio-group v-model="ruleForm.outShow" :disabled="props.type === 'check'">
                            <el-radio value="1" size="large" style="margin-right: 10px;">是</el-radio>
                            <el-radio value="0" size="large">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="分类" prop="articleCategoryId">
                        <el-cascader style="width: 170px;margin-right: 10px;" clearable filterable
                            v-model="ruleForm.articleCategoryId" :options="options" placeholder="请选择文章分类"
                            :disabled="props.type === 'check'" />
                    </el-form-item>
                    <el-form-item label="账户" prop="accountId">
                        <el-select v-model="ruleForm.accountId" placeholder="请选择账户名称" style="width: 170px"
                            :disabled="props.type === 'check'" @change="handleSelectAccount">
                            <el-option v-for="item in accountNameOptions" :key="item.id" :label="item.name"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网站" prop="siteId">
                        <el-select v-model="ruleForm.siteId" placeholder="请选择所属网站" style="width: 150px" filterable
                            :disabled="props.type === 'check'">
                            <el-option v-for="item in siteOptions" :key="item.id" :label="item.siteName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="语言" prop="langId">
                        <el-select v-model="ruleForm.langId" placeholder="请选择语言" style="width: 150px" filterable
                            :disabled="props.type === 'check'">
                            <el-option v-for="item in languageOptions" :key="item.id" :label="item.langName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span style="display: flex; align-items: center;"> <el-button @click="handleClose">取消</el-button>
                <el-button class="submit-btn" @click="handleSubmit(ruleFormRef)"
                    v-if="props.type !== 'check'">提交</el-button></span>
        </div>
        <Toolbar
            style="border-bottom: 1px solid  rgba(5, 5, 5, 0.06);display: flex;justify-content: center;background-color: #fff;"
            :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
        <div class="content-page">
            <div class="editor-container">
                <div class="title-container"><el-input :disabled="props.type === 'check'" class="title"
                        v-model="data.title" type="textarea" :autosize="{ minRows: 1.2 }" style="font-size: 28px;"
                        resize="none" placeholder="请输入文章标题" />
                </div>
                <div class="title-container"><el-input :disabled="props.type === 'check'" v-model="data.metaTitle"
                        :autosize="{ minRows: 3 }" type="textarea" resize="none" placeholder="请输入文章meta-title" />
                </div>
                <div class="title-container"><el-input :disabled="props.type === 'check'" v-model="data.metaDescription"
                        :autosize="{ minRows: 3 }" type="textarea" resize="none" placeholder="请输入文章meta-description" />
                </div>
                <div class="title-container"><el-input :disabled="props.type === 'check'" v-model="data.terms"
                        :autosize="{ minRows: 3 }" type="textarea" resize="none" placeholder="请输入文章terms" />
                </div>
                <div class="title-container"><el-input :disabled="props.type === 'check'" v-model="data.firstP"
                        :autosize="{ minRows: 3 }" type="textarea" resize="none" placeholder="请输入文章概览" />
                </div>
                <Editor :key="editorKey" disabled style="min-height: 800px; overflow-y: hidden;height: auto;"
                    v-model="data.text" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
            </div>
        </div>

    </div>
</template>

<style lang="scss">
.article-detail {
    background-color: #f5f5f5;
    height: 100%;

    .w-e-drop-panel {
        min-width: 0 !important;
    }

    .w-e-modal {
        z-index: 999 !important;
        right: 0 !important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #1677ff;
    }

    .el-radio__input.is-checked .el-radio__inner {
        background: #1677ff;
        border-color: #1677ff;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #000;
        font-weight: 600;
    }

    .submit-btn {
        background-color: #1677ff;
        color: #fff;
        box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
    }

    .submit-btn:hover {
        background-color: #1677ff !important;
        color: #fff !important;
    }

    .submit-btn:active {
        background-color: #1677ff !important;
        color: #fff !important;
        border: none;
    }

    .el-button:focus {
        outline: none;
    }

    .content-page {
        height: calc(100% - 123px);
        background-color: #f5f5f5;
        overflow: auto;

        .editor-container {
            height: auto;
            width: 750px;
            margin: 30px auto 150px;
            background-color: #fff;
            padding: 20px 50px 50px;
            border: 1px solid #e8e8e8;
            box-shadow: 0 2px 10px #0000001f;

            .title-container {
                padding: 10px 0;
                border-bottom: 1px solid #e8e8e8;
            }
        }
    }

    .el-textarea__inner {
        box-shadow: none;
    }

    .el-textarea__inner.is-focus {
        box-shadow: none;
    }

    .el-textarea__inner:hover {
        box-shadow: none;
    }

    .title {
        .el-textarea__inner::placeholder {
            font-size: 30px;
        }
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .el-form-item__label-wrap {
        align-items: center;
    }

    .el-form-item__label {
        font-weight: 700;
        color: #000;
    }

    .el-radio-group {
        flex-wrap: nowrap;
    }

    .el-textarea.is-disabled .el-textarea__inner {
        background-color: transparent;
        box-shadow: none;
    }
}
</style>
